<template>
  <div class="project-Container">
    <div class="head">
      <div class="opt">
        <router-link to="/addProject">
          <el-button type="primary">新增项目</el-button>
        </router-link>
        <el-button type="primary" @click="FaBuDig()">发布项目</el-button>
      </div>
      <div class="search">
        <el-input
          placeholder="请输入项目名称"
          suffix-icon="el-icon-search"
          v-model="search"
          @keyup.enter.native="getList()"
        ></el-input>
      </div>
    </div>

    <el-table :data="List" border style="width: 100%" @select="handleSelect">
      <el-table-column
        align="center"
        :selectable="checkboxT"
        type="selection"
        width="55"
        disabled="true"
      ></el-table-column>
      <el-table-column prop="index" label="序号" width="120"></el-table-column>
      <el-table-column prop="name" label="项目名称"></el-table-column>
      <el-table-column prop="moneyName" label="发行货币"></el-table-column>
      <el-table-column prop="totalNum" label="发币总量"></el-table-column>
      <el-table-column prop="userName" label="发起人"></el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- 0:新增 1:预热 2:合投 3:成功 4:结束 -->
          <el-button type="text" v-show="scope.row.type == 0">新增</el-button>
          <el-button type="text" v-show="scope.row.type == 1">预热</el-button>
          <el-button type="text" v-show="scope.row.type == 2">合投</el-button>
          <el-button type="text" v-show="scope.row.type == 3">成功</el-button>
          <el-button type="text" v-show="scope.row.type == 4">结束</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleInfo(scope.row)">详情</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>&nbsp;&nbsp;
          <el-button
            type="warning"
            size="small"
            plain
            @click="sendCoin(scope.row)"
            v-show="scope.row.totalNum == 0"
          >发币</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 发币 -->
    <el-dialog title="发币" @close="Cancel" :visible.sync="dialogPublish" width="30%">
      <!-- :rules="rules" -->
      <el-form
        :model="ruleFormCoin"
        ref="ruleFormCoin"
        :rules="rulesCoin"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="总数" prop="totalNum">
          <el-input v-model.number="ruleFormCoin.totalNum" placeholder="请输入总数"></el-input>
        </el-form-item>
        <div style="text-align:right;">
          <el-button @click="Cancel()">取 消</el-button>
          <el-button type="primary" @click.native="publishClick('ruleFormCoin')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 发布项目 -->
    <el-dialog title="发布项目" :visible.sync="dialogFabu" width="30%">
      <span>发布产品前确认产品参数设置是否正确，是否确认发布</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFabu = false">取 消</el-button>
        <el-button type="primary" @click.native="faBuOK()">确定发布</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      selectId: "", //勾选id
      selectType: "", // 勾选的type
      dialogFabu: false,
      search: "",
      List: [],
      total: 0,
      val: 1, //当前多少页
      currentPage4: 1,

      //发币
      dialogPublish: false,
      ruleFormCoin: {
        totalNum: ""
      },
      rulesCoin: {
        totalNum: [
          { required: true, message: "请输入总数", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" }
        ]
      },
      editId: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //复选框
    checkboxT(row, index) {
      if (row.type == 0) {
        return 1;
      } else {
        return 0;
      }
    },
    //勾选
    handleSelect(selection, row) {
      this.selectId = row.id;
      this.selectType = row.selectType;
    },
    //分页
    handleCurrentChange(val) {
      this.val = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
    FaBuDig() {
      if (this.selectId) {
        this.dialogFabu = true;
      }
    },
    //发布
    faBuOK() {
      let url = "/projects/publish";
      let params = {
        id: this.selectId
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.dialogFabu = false;
          this.$message({
            message: "发布成功",
            type: "success"
          });
          this.getList();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
          this.dialogFabu = false;
          // setTimeout(() => {
          //   this.dialogFabu = false;
          //   this.$router.push(
          //     "/projectInfo?id=" + this.selectId + "&type=" + this.selectType
          //   );
          // }, 3000);
        }
      });
    },
    //取消
    Cancel() {
      this.dialogPublish = false;
      this.ruleFormCoin = {};
    },
    //详情
    // projectInfo
    handleInfo(row) {
      this.$router.push("/projectInfo?id=" + row.id + "&type=" + row.type);
    },
    //删除
    handleDelete(row) {
      this.$confirm("是否删除此数据？", "删除", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消"
      })
        .then(() => {
          let url = "/projects/edit";
          let params = {
            id: row.id,
            status: 1
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(action => {
          this.$message({
            type: "info",
            message: "取消删除"
          });
        });
    },
    //获取数据
    getList() {
      let url = "/projects/findList";
      let params = {
        name: this.search,
        pageNum: this.val,
        pageSize: 10
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.List = res.data.list;
          this.total = res.data.total;
          this.List.forEach((element, i) => {
            this.List[i].index = (this.val - 1) * 10 + i + 1;
          });
        }
      });
    },
    sendCoin(row) {
      this.dialogPublish = true;
      this.editId = row.id;
    },
    //发币
    publishClick(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "/projects/publishToken";
          let params = {
            totalNum: this.ruleFormCoin.totalNum,
            userId: 1,
            id: this.editId
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                message: "发币成功",
                type: "success"
              });
              this.dialogPublish = false;
              this.ruleFormCoin.totalNum = "";
              this.getList();
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .search {
    width: 300px;
  }
}
</style>

<style lang="scss">
.project-Container {
  .el-button + .el-button {
    margin-left: 0px !important;
  }
}
</style>

